<template>
	<view class="content1">
		<header-box :title="'执行部工作流程'"></header-box>

		<block v-if="info != 88">
			<view class="box1">
				<view class="box2 ">
					<view class="info-text flex align-center justify-center">
						<view class="bgc1">
						</view>
						<text class="fs30">
							{{name}}
						</text>
						<view class="bgc2">
						</view>
					</view>


					<!-- 时间 -->
					<view class="pr10" v-for="(item,index) in arrList.detail" :key="index" v-if="item.type == 4">
						<view class="flex align-center mt20">
							<view class="cuIcon-round-icon mr19 w30"></view> <text
								class="f28 w600">{{item.title}}</text>
						</view>

						<view class="r10 h60 lh60 bgc mt20 ww90 ml38 pl20" @tap="showTimeProp(index)">
							<text>{{item.timeInfo ? item.timeInfo:'请选择'}}</text>
						</view>
					</view>

					<!-- 1文本 2单选 3多选 4时间 5文件   v-if="item.type == 4" -->
					<view class="pr10" v-for="(item,index) in arrList.detail" :key="index" v-if="item.type == 1">
						<view class="flex align-center mt20">
							<view class="cuIcon-round-icon mr19"></view> <text class="f28 w600">{{item.title}}</text>
						</view>

						<view class="r10 h60 lh60 bgc mt20 ww90 ml38 pl20">
							<input type="text" v-model="item.text" placeholder="请输入" style="height: 100%;" />
						</view>
					</view>

					<!-- 单选 -->
					<view class="pr10" v-for="(item,index) in arrList.detail" :key="index" v-if="item.type == 2">
						<view class="flex align-center mt20 mb20">
							<view class="cuIcon-round-icon mr19 w30 "></view><text
								class="f28 w600">{{item.title}}</text>
						</view>


						<u-radio-group v-model="item.checkedText">
							<u-radio v-for="(item1, ind) in item.answer" :key="ind" :name="item1.text"
								@change="radioGroupChange(item, item1)">
								{{item1.text}}
							</u-radio>
						</u-radio-group>
					</view>

					<!-- 多选 -->
					<view class="pr10" v-for="(item,index) in arrList.detail" :key="index" v-if="item.type == 3">
						<view class="flex align-center mt20">
							<view class="cuIcon-round-icon mr19"></view> <text class="f28 w600">{{item.title}}</text>
						</view>


						<u-checkbox-group @change="radioGroupChangeCh">
							<u-checkbox v-model="item1.checked" v-for="(item1, ind) in item.answer" :key="ind"
								:name="item1">{{item1.text}}
							</u-checkbox>
						</u-checkbox-group>
					</view>


					<!-- 上传 -->
					<view class="pr10" v-for="(item,index) in arrList.detail" :key="index" v-if="item.type == 5">
						<view class="flex align-center mt20">
							<view class="cuIcon-round-icon mr19"></view> <text class="f28 w600">{{item.title}}</text>
						</view>


						<view class="">
							上传图片
						</view>

						<u-upload :file-list="fileList2" @on-remove="onRemove2" @on-success="uploadImageB2"
							max-count="1" :action="action">
						</u-upload>
					</view>





					<view class="u-border-bottom  flex h80 align-center justify-between pr22" @tap="addShow">
						<view class="flex align-center">
							<view class="cuIcon-round-icon mr19"></view> <text class="f28">选择配合的员工</text>
						</view>
						<view class="" style="color: #717171;">
							{{userNmae ? userNmae : '请选择'}}
							<text class="cuIcon-right"></text>
						</view>
					</view>
				</view>

				<view class="ww100 mt37 mb40 ml22 mr22">
					<button type="default" class="cu-btn ww90 h98 r49 f34 mr51"
						style="color: #A18710; background-color: #FFE985;" @tap="addSet">保存</button>
				</view>

			</view>



		</block>


		<!-- 已填写的内容 -->
		<block v-if="info == 88" v-for="(item,index) in stepListFrom" :key="index">
			<view class="pl20 mt22 pt53 r20 ml22 mr22 pb50" style="background-color: #FFFFFF;">

				<view class="info-text flex align-center justify-center">
					<view class="bgc1">
					</view>
					<text class="fs30">
						{{item.flow_name}}
					</text>
					<view class="bgc2">
					</view>
				</view>


				<!-- 1文本 2单选 3多选 4时间 5文件 v-for="(item,index) in arrList.detail" :key="index"  v-if="item.type == 4" -->
				<view v-for="(item1,index) in item.explan" v-if="item1.type == 1">
					<view class="flex align-center mt20">
						<view class="cuIcon-round-icon mr19"></view> <text class="f28 w600">{{item1.title}}</text>
					</view>

					<view class="r10 h60 lh60 bgc mt20 ww90 ml38 pl20">
						<!-- <input type="text" value="" placeholder="请选择" style="height: 100%;" /> -->
						<text>{{item1.text}}</text>
					</view>
				</view>

				<!-- 单选 -->
				<view v-for="(item1,index) in item.explan" v-if="item1.type == 2">
					<view class="flex align-center mt20 mb20">
						<text class="f28 w600">{{item1.title}}</text>
					</view>

					<view class="r10 h60 lh60 mt20 ww90 ml38 pl20">
						<text>{{item1.checkedText}}</text>
					</view>

				</view>

				<!-- 多选 -->
				<view v-for="(item1,index) in item.explan" v-if="item1.type == 3">
					<view class="flex align-center mt20">
						<view class="cuIcon-round-icon mr19"></view> <text class="f28 w600">{{item1.title}}</text>
					</view>

					<block v-for="(item2, id) in item1.list" :key="id">
						<view class="flex align-center r10 h60 lh60 mt20 ww90 ml38 pl20">
							<text>{{item2.text}}</text>
						</view>
					</block>

				</view>

				<!-- 时间 -->
				<view v-for="(item1,index) in item.explan" v-if="item1.type == 4">
					<view class="flex align-center mt20">
						<view class="cuIcon-round-icon mr19"></view> <text class="f28 w600">{{item1.title}}</text>
					</view>

					<view class="r10 h60 lh60 bgc mt20 ww90 ml38 pl20">
						<text>{{item1.timeInfo}}</text>
					</view>
				</view>


				<!-- 图片 v-for="(item1,index) in item.explan"  -->
				<view v-for="(item1,index) in item.explan" v-if="item1.type == 5">
					<view class="flex align-center mt20">
						<view class="cuIcon-round-icon mr19"></view> <text class="f28 w600">{{item1.title}}</text>
					</view>

					<view class="">
						<image :src="imgs + item1.images" @tap="phone1(item1.images)" mode=""></image>
					</view>
				</view>



				<view class="u-border-bottom  flex h80 align-center justify-between pr22">
					<view class="flex align-center">
						<view class="cuIcon-round-icon mr19"></view> <text class="f28">配合的员工</text>
					</view>
					<view class="" style="color: #717171;">
						{{item.staff_name}}
					</view>
				</view>
			</view>
			
			<view class="h100">
				
			</view>


			<view class="ww100 mt37 mb40 ml22 mr22">
				<button v-if="fu_status == 0" type="default" class="cu-btn ww90 h98 r49 f34 mr51 mb50"
					style="color: #A18710; background-color: #FFE985;" @tap="addSet(item.id)">
					确定
				</button>
			</view>
		</block>


		<yy-home></yy-home>


		<u-picker v-model="showTime" :params="params" @confirm="addTime" mode="time"></u-picker>

		<!-- 负责人 -->
		<u-popup :mask-close-able="false" v-model="principal" border-radius="20"  mode="bottom">
			<view class="mt38 ww100 text-center mb68">请选择配合的员工</view>
			<view class="flex justify-between align-center u-border-bottom pl22 pr22 pb20"
				v-for="(item, index ) in arrList.staff" :key="index">
				<view class="flex align-center ">
					<image class="w80 h80 r40" :src="item.avatar" mode=""></image>
					<text class="ml20">{{item.staff_name}}</text>
				</view>
				<u-checkbox @change="radioGroupChangeCheck" v-model="item.checkbox" shape="circle" :name="item.id">
				</u-checkbox>

			</view>
			<view class="ww100 text-center mt20 mb60">
				<button type="default" class="cu-btn ww94 h90 r45" @tap="addPrincipal"
					style="background-color: #FFE985; color: #A18710;">
					确认选择
				</button>
			</view>
		</u-popup>

		<view class="foot_box"></view>
		<!-- 加载提示 -->
		<yy-loading text="加载中.." mask="true" click="true" ref="loading"></yy-loading>
		<!-- 信息提示-->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgs: this.$images,
				dataList: [],
				list: [{
						name: '是',
						disabled: false
					},
					{
						name: '否',
						disabled: false
					}
				],
				list2: [{
						name: '是',
						disabled: false
					},
					{
						name: '否',
						disabled: false
					}
				],
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				value: '',
				value2: '是',
				value3: '',
				arrList: {},
				name: '',
				showTime: false,
				params: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: false
				},
				listIndex: '',
				principal: false,
				stepId: '',
				userNmae: '',
				info: '',
				staff_ids: '',
				check: '',
				stepListFrom: [],
				textVal: '',
				newArr: [],
				iamge2: '',
				fu_status: '',
				action: this.$UPLOAD,
				radio_model: '',
				form: {
					radioValues: [],
				},
				arrListRaid: [],
				changeList: [],
			};
		},
		onShow() {

		},
		onLoad(e) {
			this.stepId = e.stepId
			this.name = e.name
			this.info = e.info
			this.fu_status = e.fu_status
			console.log('this.fu_status==>', this.fu_status);
			this.getStockList(this.stepId, e.process_id, e.flow_id)
		},
		methods: {
			
			addShow() {
				this.staff_ids = ''
				this.userNmae = ''
				this.principal = true
			},
			
			
			phone1(urls) {
				uni.previewImage({
					urls: [urls],
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},

			onRemove2(index, lists) {
				this.iamge2 = ''
			},

			uploadImageB2(e) {
				this.iamge2 = e.data.url
				console.log('this.iamge2', this.iamge2)
			},


			addPrincipal() {
				var str = ''
				this.principal = false
				this.arrList.staff.forEach((i => {
					if (i.checkbox == true){
						str += i.id + ','
						this.userNmae += i.staff_name + ' '
					}
				}))
				this.staff_ids = str.substr(0,str.length-1);
				console.log('this.staff_ids==>', this.staff_ids);
			},


			radioGroupChange(item, item1) {
				this.arrListRaid.push(item)
			},

			radioGroupChange1(e, index) {
				console.log('e,index==>', e, index);

			},

			radioGroupChangeCh(e) {
				this.arrList.detail[0].list = e
			},

			radioGroupChangeCheck(e) {
				console.log(e)
				this.dataList.push(e)
				if (e.checkbox == true) {
					this.changeList.push(e)
					console.log('this.changeList',this.changeList)
				}
			},


			// 列表
			async getStockList(id, process_id, flow_id) {
				if (this.info == 88) {
					const res = await this.$u.post("api/process/flow_user_sureInfo", {
						process_id: process_id,
						flow_id,
					})
					this.stepListFrom = res.data



					var obj = {}
					this.stepListFrom.forEach((item, index) => {
						if (item.type == 3) {
							for (let key in item.answer) {
								obj[key] = item.answer[key];
							};
							var bj = Object.keys(obj).map(val => ({
								text: obj[val],
								checked: false,
							}));
							item.answer = bj
						}

					})
				} else {

					const res = await this.$u.post("api/process/process_info", {
						id: uni.getStorageSync('userId'), // 
						flow_id: id,
					})
					this.arrList = res.data

					this.fun(this.arrList.detail)

				}
			},

			fun(list) {
				// console.log("list: ", list);
				// // var x = list.title.leng
				// list.sort((a, b) => {
				// 	// console.log("a: ",a);
				// 	let x = a.title.length
				// 	let y = b.title.length
				// 	return y - x
				// })


				var obj = {}
				var radioName = [];
				list.forEach((item, index) => {
					if (item.type == 2) {
						for (let key in item.answer) {
							obj[key] = item.answer[key];
						};
						var bj = Object.keys(obj).map((val, index1) => ({
							id: item.id * 10 + index1,
							index: index1,
							text: obj[val],
							checked: false,
						}));
						item.answer = bj
					}

					if (item.type == 3) {
						for (let key in item.answer) {
							obj[key] = item.answer[key];
						};
						var bj = Object.keys(obj).map(val => ({
							text: obj[val],
							checked: false,
						}));
						item.answer = bj
					}
				})
			},
			showTimeProp(ind) {
				console.log(ind)
				this.showTime = true
				this.listIndex = ind
			},

			addTime(time) {
				this.arrList.detail[this.listIndex].timeInfo = time.year + '-' + time.month + '-' + time.day + ' ' + time
					.hour +
					':' + time.minute

			},

			async addSet(id) {
				if (this.info == 88) {
					const res = await this.$u.post("api/process/flow_user_update", {
						user_id: uni.getStorageSync('uid'), // 流程id
						id, // 步骤
					})

					if (res.code == 1) {
						this.$tools.msg(res.msg)

						this.$tools.back()
					} else {
						this.$tools.msg(res.msg)
					}
				} else {
					this.arrList.detail[0].images = this.iamge2
					console.log('this.arrList.detail', this.arrList.detail[0].images)
					const res = await this.$u.post("api/process/flow_user_add", {
						process_id: uni.getStorageSync('userId'), // 外层员工id
						flow_id: this.stepId, // 步骤
						staff_id: uni.getStorageSync('staff_id'), // 	负责人id
						staff_ids: this.staff_ids, // 确认员工
						explan: JSON.stringify(this.arrList.detail), // 负责人操作
					})

					if (res.code == 1) {
						this.$tools.msg(res.msg)

						this.$tools.back(1)
					} else {
						this.$tools.msg(res.msg)
					}
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	page {
		width: 100%;
		height: 100vh;
		background-color: #9885F8;
	}
	
	.content1 {
		width: 100%;
		height: 100%;
		// padding-bottom: 280rpx;
		background-color: #9885F8;

		.header {
			width: 100%;
			height: 150rpx;
			line-height: 150rpx;
			display: flex;
			align-items: center;
			// padding-left: 10rpx;
			padding-top: 30rpx;
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			background: linear-gradient(to right, #656CE6, #9397FC);

			.arrow {
				position: relative;
				display: inline-block;
			}

			.arrow::before {
				content: '';
				width: 10px;
				height: 10px;
				border: 0px;
				border-bottom: solid 2px #fff;
				border-left: solid 2px #fff;
				-ms-transform: rotate(45deg);
				-webkit-transform: rotate(45deg);
				transform: rotate(45deg);
				position: absolute;
				top: 50%;
				left: 0;
				margin-top: -4px;
				margin-left: 28rpx;
			}

			.title {
				color: #fff;
				margin: 0 auto;
			}
		}


		.box1 {
			width: 100%;
			height: 100%;
			padding: 22rpx;
			background-color: #9885F8;

			.box2 {
				margin: 0 22rpx;
				border-radius: 20rpx;
				padding: 50rpx 20rpx;
				background-color: #FFFFFF;
			}
		}

		.cuIcon-round-icon {
			width: 18rpx;
			height: 18rpx;
			border-radius: 9rpx;
			background-color: #FBE161;
		}

		.bgc {
			background-color: #EFECFF;
		}

		.radio-text {
			padding-bottom: 57rpx;
			text-align: center;
			display: flex;
			margin: 0 22rpx !important;
			align-items: center;
			justify-content: center;
			background-color: #FFFFFF;
			border-radius: 0 0 20rpx 20rpx;

			/deep/.u-radio {
				width: 168rpx !important;
				height: 60rpx;
				background: #EFECFF;
				border-radius: 30rpx;
				margin-right: 20rpx;
				text-align: center !important;
				line-height: 60rpx;
				text-align: center;
			}

			/deep/.u-radio__icon-wrap--circle.data-v-0498b190 {
				border-radius: 100%;
				margin: 0 27rpx;
			}

		}



		.info-text {
			font-weight: bold;
			font-family: PingFang SC;

			.bgc1 {
				width: 60rpx;
				height: 16rpx;
				border-radius: 8rpx;
				margin-right: 16rpx;
				background-image: linear-gradient(45deg, #FFFFFF, #FA469D);
			}

			.bgc2 {
				width: 60rpx;
				height: 16rpx;
				border-radius: 8rpx;
				margin-left: 16rpx;
				background-image: linear-gradient(45deg, #FA469D, #FFFFFF);
			}
		}
	}
</style>
